<template>
  <div :class="{ ting: true, wei: $route.meta.footer }">
    <van-row type="flex">
      <van-col span="3" class="iconfont icon-bofang"></van-col>
      <van-col span="15"
        ><van-notice-bar
          :scrollable="!$store.state.icon"
          :text="$store.state.song"
      /></van-col>
      <van-col
        span="3"
        :class="{
          iconfont: iconfont,
          'icon-bofang1': $store.state.icon,
          'icon-bofangzhong': !$store.state.icon,
        }"
        @click="$store.state.icon = !$store.state.icon"
      ></van-col>
      <van-col span="3" class="iconfont icon-gedan"></van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  props: ['iconBofang1', 'iconfont'],
  data() {
    return { icon: this.iconBofang1, song: '' }
  },
  methods: {
  },
  created() {
  }
}
</script>
<style lang="less">
.ting {
  height: 40px;
  width: 100%;
  background: white;
  position: fixed;
  bottom: 49px;
  .van-row {
    height: 100%;
    .iconfont {
      line-height: 40px;
      text-align: center;
      &:before {
        font-size: 22px;
        color: rgb(54, 238, 177);
      }
    }
    .icon-bofang1:before {
      font-size: 30px;
    }
    .icon-bofang:before {
      font-size: 30px;
      color: #aaa9a9;
    }
  }
  .van-notice-bar {
    background-color: white;
    color: #333;
  }
}
.wei {
  bottom: 0;
}
</style>
